<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{../script/docs.min.js}"></script>
    <script th:src="@{../layer/layer.js}"></script>
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-header{
            background-color: #dca7a7;
        }
        .modal-dialog{
            width:500px;
        }
        .close{
            background-color: red;
        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>

<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <!--   从数据库中查询出所有的school  需要校区名-->
                        <div class="form-group">
                            <label>班级</label>
                            <select name="cid" id="cid" class="form-control" placeholder="请选择地区">
                                <option value="">请选择班级</option>
                                <option th:each="clazz,sta:${clazzList}" th:text="${clazz.cid}"
                                        th:value="${clazz.cid}">
                                </option>
                            </select>
                        </div>
                        <!--   从数据库中查询出所有的work 需要加班中的申请人信息-->
                        <div class="form-group ">
                            <label>讲师姓名</label>
                            <select name="name" id="name" class="form-control" placeholder="请选择老师">
                                <option value="">请选择姓名</option>
                                <option th:each="user,sta:${userList}" th:text="${user.uname}"
                                        th:value="${user.uname}">
                                </option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnSearch"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <!--     新增值班按钮               -->
                    <button type="button" class="btn btn-primary" style="float:right;" data-toggle="modal" data-target="#myModal1"><i class="glyphicon glyphicon-plus"></i> 课程安排</button>

                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">NO.</th>
                                <th>班级</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>课程模块</th>
                                <th>方向</th>
                                <th>讲师</th>
                                <th>教室</th>
                                <th>op</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="9" align="center">
                                    <ul class="pagination" id="byPage">

                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                    <!-- 模态框（Modal）新增课程信息-->
                    <form id="dutyAddForm" enctype="multipart/form-data">
                        <div class="modal fade myModel" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="myModalLabel5">课程安排</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label>班级</label>
                                            <select name="cid" id="cid1" class="form-control myModal-input" placeholder="请选择地区">
                                                <option value="">请选择班级</option>
                                                <option th:each="clazz,sta:${clazzList}" th:text="${clazz.cid}"
                                                        th:value="${clazz.cid}">
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group" id="begintime">
                                            <label for="btime">开始日期:</label>
                                            <input type="date" name="btime" id="btime" class="form-control myModal-input">
                                        </div>
                                        <div class="form-group" id="endtime">
                                            <label for="etime">结束日期:</label>
                                            <input type="date" name="etime" id="etime" class="form-control myModal-input">
                                        </div>
                                        <div class="form-group">
                                            <label >讲师：</label>
                                            <select id="name1" name="name"  class="form-control myModal-input" placeholder="请选择">
                                                <option value="">请选择姓名</option>
                                                <option th:each="user,sta:${userList}" th:text="${user.uname}"
                                                        th:value="${user.uname}">
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label >课程模块：</label>
                                            <input name="lmodule" id="lmodule"  class="form-control myModal-input">
                                        </div>
                                        <div class="form-group">
                                            <label >教室：</label>
                                            <select id="lclass" name="lclass"  class="form-control myModal-input" placeholder="请选择">
                                                <option value="">请选择教室</option>
                                                <option value="1">教室1</option>
                                                <option value="2">教室2</option>
                                                <option value="3">教室3</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default"onclick="formReset()" value="Reset" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" id="btnAdd">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1);
    });
    $("#btnSearch").click(function () {
        showList(1);
    });
    //清除表中数据
    function formReset()
    {
        document.getElementById("dutyAddForm").reset()
    }
    //模态框保存按钮
    $("#btnAdd").click(function () {
        var cid1=$("#cid1").val()
        var btime=$("#btime").val()
        var etime=$("#etime").val()
        var name1=$("#name1").val()
        var lmodule=$("#lmodule").val()
        var lclass=$("#lclass").val()
        if(cid1==null||cid1==""||
            btime==null||btime==""||
            etime==null||etime==""||
            name1==null||name1==""||
            lmodule==null||lmodule==""||
            lclass==null||lclass==""){
            layer.msg("数据不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var btime=$("#btime").val()
        var etime=$("#etime").val()
        var f=btime>etime;
        if(f){
            layer.msg("开始日期不能在结束日期之后", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }

        $.ajax({
            url: "/EduManage/lessonSaveDo",
            type: "post",
            dataType:"json",
            data:$("#dutyAddForm").serialize(),
            success: function (date) {
                if (date.result) {
                    layer.msg("保存成功", {time: 1000, icon: 4}, function () {
                        location.href = "/EduManage/lessonList";
                    });
                }
            }
        });
    });

    //删除按钮点击事件
    function del(lno) {
        alert("删除")
        $.ajax({
            url: "/EduManage/delDo",
            type: "post",
            data: {"lno": lno},
            success: function (data) {
                if (data.result) {
                    layer.msg("删除成功", {time: 2000, icon: 4}, function () {
                        location.href = "/EduManage/lessonList";
                    });
                } else {
                    layer.msg("删除失败", {time: 1000, icon: 5}, function () {
                    });
                }
            }
        });

    }

    //查询条件查询
    function showList(currentPage) {
        $.ajax({
            url: "/EduManage/lessonListDo",
            type: "post",
            data: {
                "currentPage": currentPage,
                "name": $("#name").val(),
                "cid":$("#cid").val(),
                // "address": $("#address").val(),
                // "btime": $("#btime").val(),
                // "etime": $("#etime").val()
            },
            success: function (data) {
                if (data.result) {
                    var str = "";
                    $.each(data.lessonList, function (index, lesson) {
                        str += "<tr>";
                        str += "<td>" + (index + 1) + "</td>";
                        str += "<td>" + lesson.cid + "</td>";
                        str += "<td>" + lesson.btime + "</td>";
                        str += "<td>" + lesson.etime + "</td>";
                        str += "<td>" + lesson.lmodule + "</td>";
                        str += "<td>" + lesson.dirname+ "</td>";
                        str += "<td>" + lesson.name + "</td>";
                        str += "<td>" + lesson.lclass + "</td>";
                        str += "<td>"
                        str += '<button  type="button" class="btn btn-danger btn-xs " onclick="del(' + lesson.lno + ')"><i class=" glyphicon glyphicon-remove"></i></button>';
                        str += "</td>";
                        str += "</tr>";
                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage ? 'disabled' : '') + '"><a href="#" onclick="showList('+(data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.countPage:data.pageBean.currentPage+1)+')">下一页</a></li>';
                    $("#byPage").html(pageStr);
                }
            }
        });
    }
</script>
</body>
</html>